<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景图片(Background images)</title>
  <!-- 
    CSS的背景图片（Background Images）是一种常用的样式效果，可以为元素添加背景图片，丰富页面的视觉效果。以下是CSS中关于背景图片的主要要点： 
 
      1. 设置背景图片（Setting Background Image）：可以通过background-image属性为元素设置背景图片，语法为：background-image: url('image.jpg'); 

      2. 背景图片重复（Background Image Repeat）：可以通过background-repeat属性控制背景图片在元素内如何重复显示，常见取值包括：
         repeat（默认值，水平和垂直方向重复）、no-repeat（不重复）、repeat-x（水平方向重复）、repeat-y（垂直方向重复）； 

      3. 背景图片位置（Background Image Position）：可以通过background-position属性设置背景图片的位置，
         可以使用关键字（如top、center、bottom、left、right）或百分比值来指定位置； 

      4. 背景图片大小（Background Image Size）：可以通过background-size属性设置背景图片的大小，
         可以使用关键字（如cover、contain）或具体数值来控制背景图片的尺寸； 

      5. 背景图片附加（Background Image Attachment）：可以通过background-attachment属性控制背景图片的滚动效果，常见取值包括：
         scroll（随内容滚动）、fixed（固定在视口）、local（随元素滚动）。 
   -->
  <style>
    div {
      width: 300px;
      height: 300px;
      margin-bottom: 10px;
      border: 1px solid #000;
    }

    /* 1. 设置背景图片 */
    .background-image {
      /* 背景图片 */
      background-image: url(../../images/music_album01.jpg), url(../../images/diqiu.jpg);
    }

    /* 2. 设置背景图片/重复 */
    .background-image-repeat {
      /* 背景图片 */
      background-image: url(../../images/music_album01.jpg), url(../../images/diqiu.jpg);
      /* 不平铺 */
      background-repeat: no-repeat;
    }

    /* 3. 设置背景图片/重复/大小 */
    .background-image-repeat-size {
      /* 背景图片 */
      background-image: url(../../images/diqiu.jpg);
      /* 不平铺 */
      background-repeat: no-repeat;
      /* 背景尺寸 */
      /* background-size: 100% 100%; */
      /* background-size: 200px 200px; */
      background-size: 200px auto;
    }

    /* 4. 设置背景图片/重复/位置 */
    .background-image-repeat-position {
      /* 背景图片 */
      background-image: url(../../images/diqiu.jpg);
      /* 不平铺 */
      background-repeat: no-repeat;
      /* 背景位置 */
      /* background-position: 200px -100px; */
      /* background-position: top; */
      background-position: center;
    }

    /* 5. 设置背景图片/重复/附加 */
    .background-image-attachemt {
      overflow: scroll;
      background-color: skyblue;
      color: #fff;
      /* 背景图片 */
      background-image: url(../../images/diqiu.jpg);
      /* 背景附加效果 */
      /* fixed: 背景固定在视口 */
      background-attachment: fixed;
      /* scroll: 背景随整体视口内容滚动 */
      /* background-attachment: scroll; */
      /* local: 背景随元素滚动 */
      /* background-attachment: local; */
    }
  </style>
</head>

<body>

  <div class="background-image"></div>
  <div class="background-image-repeat"></div>
  <div class="background-image-repeat-size"></div>
  <div class="background-image-repeat-position"></div>
  <div class="background-image-attachemt">
    CSS的背景图片（Background Images）是一种常用的样式效果，可以为元素添加背景图片，丰富页面的视觉效果。以下是CSS中关于背景图片的主要要点：

    1. 设置背景图片（Setting Background Image）：可以通过background-image属性为元素设置背景图片，语法为：background-image: url('image.jpg');

    2. 背景图片重复（Background Image Repeat）：可以通过background-repeat属性控制背景图片在元素内如何重复显示，常见取值包括：
    repeat（默认值，水平和垂直方向重复）、no-repeat（不重复）、repeat-x（水平方向重复）、repeat-y（垂直方向重复）；

    3. 背景图片位置（Background Image Position）：可以通过background-position属性设置背景图片的位置，
    可以使用关键字（如top、center、bottom、left、right）或百分比值来指定位置；

    4. 背景图片大小（Background Image Size）：可以通过background-size属性设置背景图片的大小，
    可以使用关键字（如cover、contain）或具体数值来控制背景图片的尺寸；

    5. 背景图片附加（Background Image Attachment）：可以通过background-attachment属性控制背景图片的滚动效果，常见取值包括：
    scroll（随内容滚动）、fixed（固定在视口）、local（随元素滚动）。
  </div>

  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>

</body>

</html>